<template>
  <li :class="{ completed: todo.done, editing: editing }" class="todo">
    <div class="view">
      <input :checked="todo.done" class="toggle" type="checkbox" @change="toggleTodo(todo)" />
      <label @dblclick="editing = true" v-text="todo.text" />
      <button class="destroy" @click="deleteTodo(todo)" />
    </div>
    <input
      v-show="editing"
      v-focus="editing"
      :value="todo.text"
      class="edit"
      @keyup.enter="doneEdit"
      @keyup.esc="cancelEdit"
      @blur="doneEdit"
    />
  </li>
</template>

<script>
export default {
  name : 'Todo',
  directives : {
    focus( el, { value }, { context } ) {
      if ( value ) {
        context.$nextTick( () => {
          el.focus()
        } )
      }
    }
  },
  props : {
    todo : {
      type : Object,
      default : function() {
        return {}
      }
    }
  },
  data() {
    return {
      editing : false
    }
  },
  methods : {
    deleteTodo( todo ) {
      this.$emit( 'deleteTodo', todo )
    },
    editTodo( { todo, value } ) {
      this.$emit( 'editTodo', { todo, value } )
    },
    toggleTodo( todo ) {
      this.$emit( 'toggleTodo', todo )
    },
    doneEdit( e ) {
      const value = e.target.value.trim()
      const { todo } = this
      if ( !value ) {
        this.deleteTodo( {
          todo
        } )
      } else if ( this.editing ) {
        this.editTodo( {
          todo,
          value
        } )
        this.editing = false
      }
    },
    cancelEdit( e ) {
      e.target.value = this.todo.text
      this.editing = false
    }
  }
}
</script>
